<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--Example-->
<!--
一个form表单（block）
包含两个修饰符（modifiers ）：theme:"xmas"和simple:true;
包含两个元素（element），元素分别是input和submit
submit有一个修饰符disabled:true

html和css如下：
-->
<style>
    .form{}
    .form--theme-xmas{}
    .form--simple{}
    .form__input{}
    .form__submit{}
    .form__submit--disabled{}
</style>
<form class="form form--theme-xmas form--simple">
    <input type="text" class="form__input">
    <input type="submit" class="form__submit form__submit--disabled">
</form>



<!--Example-->
<!--
一个名为的块.site-search，
其中包含一个名为的元素.site-search__field。
我们还可以看到.site-search被叫的变体.site-search--full
-->
<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>



<!--Example-->
<!--
.media is the block
.media__img--rev is an element of .media that has a modifier applied
.media__body is an unmodified(未更改的) element of .media
-->
<div class="media">
    <img src="logo.png"  class="media__img  media__img--rev" alt="Foo Corp logo">
    <div class="media__body"></div>
</div>

</body>
</html>